
<template>
	<view class="box">
        <view class="bg-white search-box">
          <view class="search-input flex-box">
              <u-search placeholder="请输入关键字" bgColor="transparent" v-model="keyword" :showAction="false"></u-search>
              <text @click="search">搜索</text>
          </view>
        </view>
       <view class="padding-l-r-30">
           <view class="list-box flex-box" v-for="item in list">
               <view class="img-box">
                   <image :src="item.image" mode="aspectFill"></image>
               </view>
               <view class="list-item flex-column">
                    <view class="name">{{item.title}}</view>
                   <view class="time"> {{item.subtitle}} </view>
                   <view class="location justifyContent-spaceBetween">
                      ￥{{ item.price }}
                       <text @click="reservation(item)">立即预约</text>
                   </view>
               </view>
           </view>
       </view>
    </view>
</template>

<script>
import {serviceList} from '@/api/service'
export default {
    data() {
        return {
            keyword: '',
            list :[  ],
            page:1,
            isMore:true
        };
    },

    onLoad() {
        this.initList()
    },

    onPullDownRefresh() {
        // 下拉刷新时触发的逻辑
        this.initList()
        setTimeout(function() {
            uni.stopPullDownRefresh()
        } )
    },
    onReachBottom(){
        if (this.isMore) {
            setTimeout(() => {
                this.getList()
            }, 100)
        } else {
            uni.showToast({
                title: '暂无更多',
                icon: 'none'
            })
        }
    },
	methods:{
        initList(){
            this.page =1
            this.list=[]
            this.getList()
        },
        search(){
            this.initList()
        },
        getList(){
            let params = {
                page:this.page,
                limit:10,
                type:2
            }
            serviceList(params ).then(res=>{
                if (res.code==1){
                    this.list = this.list.concat(res.data)
                    if (res.data.length<10) {
                        this.isMore = false
                    }else {
                        this.isMore = true
                    }
                }

            })
        },
		reservation(item){
			uni.navigateTo({
				url:'/pageA/service/details?id='+item.id
			})
		}
	}
};
</script>

<style scoped lang="scss">
.box {
    min-height: 100vh;background: #F7F7F7;
}
.search-box {
    box-sizing: border-box;
    padding: 10rpx 25rpx;
    margin-bottom: 20rpx;
    .search-input {
        align-items: center;
        background: #FAFAFA;
        border-radius: 33rpx;
        border: 1px solid #DBDBDB;
        text {
            padding: 0 25rpx;
            color: #12B5CF;
            font-size: 28rpx;
            border-left: 1px solid #999;
        }
    }
}
.list-box {
    padding: 20rpx;
    margin-bottom: 20rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    color: #4D4D4D;
    font-size: 24rpx;
    .img-box {
        min-width: 160rpx;
        margin-right: 20rpx;
        image {
            width: 160rpx;
            height: 160rpx;
        }
    }
    .list-item {
        flex: 1;
        justify-content: space-between;
    }
    .name {
        color: #000;
        font-size: 30rpx;
    }
    .location {
        align-items: center;
        color: #4D4D4D;
        font-size: 24rpx;
        text {
            width: 160rpx;
            height: 60rpx;
            background: #43ABC4;
            border-radius: 40rpx;
            color: #fff;
            text-align: center;
            line-height: 60rpx;
        }
    }
}
</style>
